<template>
  <div>
    <el-dialog :title="title" :visible="visible" @close="handleClose" width="800px">
      <el-form :model="form" label-position="right" :rules="rules" ref="formRef">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="库区编号" :label-width="formLabelWidth" prop="stoAreaCode">
              <el-input v-model="form.stoAreaCode" placeholder="请输入库区编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库区名称" :label-width="formLabelWidth" prop="stoAreaName">
              <el-input v-model="form.stoAreaName" placeholder="请输入库区名称" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="是否管理批号" :label-width="formLabelWidth" prop="isglph">
              <el-select clearable v-model="form.isglph" style="width: 100%;" placeholder="请选择是否管理批号">
                <el-option v-for="(item, index) in yesOrNo" :key="index" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否拦截负库存" :label-width="formLabelWidth" prop="isljfkc">
              <el-select clearable v-model="form.isljfkc" style="width: 100%;" placeholder="请选择是否拦截负库存">
                <el-option v-for="(item, index) in yesOrNo" :key="index" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主要负责人" :label-width="formLabelWidth" prop="fuzr">
              <el-input v-model="form.fuzr" placeholder="请输入主要负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计到货天数" :label-width="formLabelWidth" prop="otd">
              <el-input v-model="form.otd" placeholder="请输入预计到货天数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" :label-width="formLabelWidth" prop="area">
              <el-input v-model="form.area" placeholder="请输入面积" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体积" :label-width="formLabelWidth" prop="cubage">
              <el-input v-model="form.cubage" placeholder="请输入体积" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理人员数" :label-width="formLabelWidth" prop="guanlrys">
              <el-input v-model="form.guanlrys" placeholder="请输入管理人员数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可存放品种" :label-width="formLabelWidth" prop="kecfpzs">
              <el-input v-model="form.kecfpzs" placeholder="请输入可存放品种" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规定存放品种数" :label-width="formLabelWidth" prop="guidcfpzs">
              <el-input v-model="form.guidcfpzs" placeholder="请输入规定存放品种数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构标识" :label-width="formLabelWidth" prop="duifbsh">
              <el-input v-model="form.duifbsh" placeholder="请输入机构标识" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否管理货架" :label-width="formLabelWidth" prop="isHj">
              <el-select clearable v-model="form.isHj" style="width: 100%;" placeholder="请选择是否管理货架">
                <el-option v-for="(item, index) in yesOrNo" :key="index" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
              <el-select v-model="form.type" placeholder="请选择类型">
                <el-option v-for="dict in dict.type.warehouse_type"  :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="库区状态" :label-width="formLabelWidth" prop="enableState">
              <el-select clearable v-model="form.enableState" style="width: 100%;" placeholder="请选择是否审核">
                <el-option v-for="(item, index) in wareStatus" :key="index" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="移库自动下架确认" :label-width="formLabelWidth" prop="isYkzdxj">
              <el-input v-model="form.isYkzdxj" placeholder="请输入移库自动下架确认" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核" :label-width="formLabelWidth" prop="shenhe">
              <el-select clearable v-model="form.shenhe" style="width: 100%;" placeholder="请选择是否审核">
                <el-option v-for="(item, index) in yesOrNo" :key="index" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" :label-width="formLabelWidth" prop="yyj">
              <el-input v-model="form.yyj" placeholder="请输入优先级" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移库是否自动上架" :label-width="formLabelWidth" prop="isYkzdsj">
              <el-input v-model="form.isYkzdsj" placeholder="请输入移库是否自动上架" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否调度" :label-width="formLabelWidth" prop="isdd">
              <el-input v-model="form.isdd" placeholder="请输入是否调度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="索取时生成拣货单" :label-width="formLabelWidth" prop="isSqjhd">
              <el-input v-model="form.isSqjhd" placeholder="请输入索取时生成拣货单" />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addStoArea, //新增
    updateStoArea, //修改
  } from "@/api/index/warehouse";
  export default {
    dicts: ['warehouse_type'],
    data() {
      return {
        form: {
          stoAreaCode: '',
          stoAreaName: '',
          isglph: '',
          isljfkc: '',
          fuzr: '',
          otd: '',
          area: '',
          cubage: '',
          guanlrys: '',
          kecfpzs: '',
          guidcfpzs: '',
          duifbsh: 'YXL',
          isHj: '',
          type: '',
          enableState: '',
          isYkzdxj: '是',
          shenhe: '',
          yyj: '',
          isYkzdsj: '否',
          isdd: '是',
          isSqjhd: '否',
        },
        yesOrNo: [{
          name: '是',
          value: '是'
        }, {
          name: '否',
          value: '否'
        }],
        wareStatus: [{
          name: '停售',
          value: '0'
        }, {
          name: '可销',
          value: '1'
        }],
        title: '',
        formLabelWidth: '125px',
        rules: {
          stoAreaCode: [{
            required: true,
            message: '库区编码不能为空',
            trigger: 'blur'
          }, ],
          stoAreaName: [{
            required: true,
            message: '库区名称不能为空',
            trigger: 'blur'
          }],
          enableState: [{
            required: true,
            message: '库区状态不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    props: ['visible'],
    methods: {
      openDialog(type, val,data) {
        this.form.stoId = data;
        this.title = type === 'edit' ? '编辑库区' : '新增库区';
        // 根据类型区分新增和编辑逻辑
        if (type === 'edit' && val) {
          this.form = {
            ...val
          };
        } else {
          this.form = {
            stoAreaCode: '',
            stoAreaNamee: '',
            isglph: '',
            isljfkc: '',
            fuzr: '',
            otd: '',
            area: '',
            cubage: '',
            guanlrys: '',
            kecfpzs: '',
            guidcfpzs: '',
            duifbsh: 'YXL',
            isHj: '',
            type: '',
            enableState: '',
            isYkzdxj: '是',
            shenhe: '',
            yyj: '',
            isYkzdsj: '否',
            isdd: '是',
            isSqjhd: '否',
            stoId:data
          }
        }
      },
      // 提取重置表单的逻辑
      handleClose() {
        this.$nextTick(() => {
          this.$refs.formRef.resetFields();
        })
        // 通过事件通知父组件更新visible值，触发update:visible事件
        this.$emit('update:visible', false);
      },
      //提交表单
      submit() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            const apiMethod = this.title === '新增库区' ? addStoArea : updateStoArea;
            // 调用相应的 API 方法
            apiMethod(this.form).then(res => {
              this.$emit('addSuccess'); // 通知父组件添加成功
              this.$message({
                message: res.msg, // 显示成功消息
                type: 'success',
              });
              // 提交成功后可以选择清空表单
              this.handleClose();
            }).catch(err => {
              this.$message({
                message: err?.msg || '操作失败', // 捕获错误信息
                type: 'error',
              });
            });
          } else {
            // 校验失败
            return false;
          }
        });
      }
    }
  }
</script>

<style></style>
